<template>
	<view class="boxs">
		<view class="floot">
			<view class="floot-left" @click="calculator">
				<image src="https://z3.ax1x.com/2021/04/19/co8FhQ.png" style="width: 24rpx;height: 32rpx;">
				</image>
			</view>
			<view class="floot-right" @click="tobuy(detailData.fid,detailData.productName,detailData.payType,detailData.tradingRules.minMoney)" v-if="sumCount>0&&active">
				立即购买
			</view>
			<view class="floot-right1" v-if="sumCount==0">已售馨</view>
			<view class="floot-right1" v-if="!active&&sumCount>0">
				{{sellTimeName}}
			</view>

		</view>
		<!-- 模态框 -->
		<view class="popupBox">
			<view class="maskName" v-if="invoiceShow" @tap="invoiceShow=false"></view>
			<view class="newForm" v-if="invoiceShow" style="top: 60vh;">
				<view class="cents">
					<view class="cent1">收益计算器</view>
					<view class="cent2" @click="calculatorNo">
						<image src="https://z3.ax1x.com/2021/04/19/cTrxVe.png"></image>
					</view>
				</view>
				<view class="input-box">
					<text>投资金额(元)</text>
					<input class="input" v-model="number" />
				</view>
				<view class="input-box2">
					<text>据业绩比较基准28天后可赚</text>
					<input class="input2" :value="computNum" />
				</view>
			</view>
		</view>

		<view>
			<!-- 头部 -->
			<view class="gold-background">
				<view class="gold-paice">
					<text>{{detailData.yieldRates}}</text>
				</view>
				<view class="gold-newest">业绩比较基准(%)</view>

				<view class="gold-Decline">
					<view class="gold-item">
						<text class="item-text">{{detailData.period}}</text><br>
						<text class="item-texttwo">产品期限(天)</text>
					</view>
					<view class="gold-item">
						<text class="item-text">{{detailData.minimumMoney}}</text><br>
						<text class="item-texttwo">起购价格</text>
					</view>
				</view>
			</view>

			<view class="navs">
				<!-- 投资周期 -->
				<view class="security-title">
					<view class="title-box"></view>
					<view class="title">投资周期</view>
				</view>
				<view class="touzi">
					<view class="touzi-dian">
						<view class="dian-xian"></view>
						<view class="dian-yuan"></view>
						<view class="dian-cx"></view>
						<view class="dian-yuan2"></view>
						<view class="dian-cx"></view>
						<view class="dian-yuan2"></view>
						<view class="dian-cx"></view>
						<view class="dian-yuan2"></view>
						<view class="dian-xian"></view>
					</view>
					<view class="touzi-cent">
						<view class="cent-box">
							<view class="box-top">购买</view>
							<view class="box-top2">计算收益</view>
							<view class="box-top3">发放收益</view>
							<view class="box-top4">到账</view>
						</view>
						<view class="cent-box">
							<view class="box-bow">{{detailData.investmentCycleBean.buyDay}}</view>
							<view class="box-bow2">{{detailData.investmentCycleBean.calculateEarningsDay}}</view>
							<view class="box-bow3">{{detailData.investmentCycleBean.duteDate}}</view>
							<view class="box-bow4">{{detailData.investmentCycleBean.accountingDate}}</view>
						</view>
						<view class="xuxian"></view>
						<view class="cent-floor">
							<view class="floor-zuo">购买说明</view>
							<view class="floor-you">
								{{detailData.instructions}}
							</view>
						</view>
					</view>
				</view>

				<!-- 安全保障标题 -->
				<view class="security-title">
					<view class="title-box"></view>
					<view class="title">安全保障</view>
				</view>

				<view class="security-box">

					<view class="security-every">
						<view class="every-item">
							<image src="https://z3.ax1x.com/2021/04/19/cozhTS.png" mode="" class="every-image"></image>
							<view class="every-text">知名金融机构</view>
						</view>
						<view class="every-item">
							<image src="https://z3.ax1x.com/2021/04/19/cozfw8.png" mode="" class="every-image"></image>
							<view class="every-text">精选优质产品</view>
						</view>
						<view class="every-item">
							<image src="https://z3.ax1x.com/2021/04/19/cozWef.png" mode="" class="every-image"></image>
							<view class="every-text">监管机构备案</view>
						</view>
					</view>

					<view class="security-describe">
						<text
							class="describe">本产品为民生银行推出的积存金产品，通过民生银行电子账户进行交易，黄金价格实时波动。产品风险等级为中等，不保证最低收益，投资风险由投资人本人承担</text>
					</view>

				</view>
			</view>
			<view>
				<!-- 交易规则 -->
				<view class="information">

					<view class="information-item" v-for="(item,index) in information" :key="item._id">
						<text class="information-text" :class="{informationText:item.name==informationActive}"
							@tap="viewTabBtn(index,item.name)">{{item.name}}</text>
						<view :class="{informationActive:item.name==informationActive}" @tap="tabchange"></view>
					</view>
				</view>
				<view class="swiper" :current="start" @change="tabchange">
					<view @tap="tabchange" v-if="informationActive=='交易规则'">
						<view class="item-box">
							<view class="item-top">购买与领取</view>
							<view class="item-top">
								<view class="item-goumai">购买金额</view>
								<text>{{detailData.tradingRules.minMoney}}元起购</text>
							</view>
							<view class="item-top">
								<view class="item-goumai">购买金额</view>
								<text>{{detailData.tradingRules.drawMoney}}</text>
							</view>
							<view class="item-top">
								<view class="item-goumai">到账说明</view>
								<text>{{detailData.tradingRules.toillustrate}}</text>
							</view>
							<view class="item-kfr">
								<view class="kfr-left">开放日</view>
								<view class="kfr-right">{{detailData.tradingRules.openDay}}</view>
							</view>
						</view>
						<view class="item-syfy">
							<view class="syfy-top">收益与费用</view>
							<view class="syfy-cent">
								<view class="cent-left">收益规则</view>
								<view class="cent-right">{{detailData.tradingRules.rule}}</view>
							</view>
							<view class="syfy-btw">
								<view class="btw-zuo">费用规则</view>
								<view class="btw-you">购买及领取均无手续费</view>
							</view>
						</view>
						<view class="buttow">
							<view class="but-leibao">支持银行列表</view>
							<view class="container">
								<view class="d-table">
									<view class="d-tr">
										<view class="d-td">
											<view class="d-table">
												<view class="d-tr">
													<view class="d-th">银行列表</view>
													<view class="d-th border-left">单笔限额(元)</view>
													<view class="d-th border-left">单日限额(元)</view>
												</view>
											</view>
										</view>
									</view>
									<view class="d-tr" v-for="item in detailData.tradingRules.bankList" :key="item">
										<view class="d-td">
											<view class="d-table">
												<view class="d-tr">
													<view class="d-td">
														<view class="td-box">
															<image :src="item.bankimgSrc"
																style="width: 30rpx;height: 30rpx;">
															</image>
															<text>{{item.bankName}}</text>
														</view>
													</view>
													<view class="d-td border-left">
														{{item.singleLimit}}
													</view>
													<view class="d-td border-left">
														{{item.dayLimit}}
													</view>
												</view>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="swiper-item1" v-if="informationActive=='信息披露'" @click="tabchange">
						<!-- 信息披露 -->
						<view class="essential-information">
							<view class="essential-titll">
								<text class="titll-text">基本信息</text>
							</view>

							<view class="essential-vice-titll">
								<view class="vice-titll">产品名称</view>
								<view class="vice-text">民生积存金</view>
							</view>
							<view class="essential-vice-titll">
								<view class="vice-titll">黄金价格</view>
								<view class="vice-text">中国民生银行股份有限公司</view>
							</view>
							<view class="essential-vice-titll">
								<view class="vice-titll">风险等级</view>
								<view class="vice-text no-line">由民生银行参考金交所AU99.99及境外价格</view>
							</view>
							<view class="essential-vice-titll">
								<view class="vice-titll">风险等级</view>
								<view class="vice-text">中等</view>
							</view>

						</view>

						<!-- 查看协议 -->
						<view class="agreement">
							<view class="essential-titll">
								<text class="titll-text">查看协议</text>
							</view>

							<view class="agreement-vice-titll">
								<view class="agreement-titll">《客户协议》</view>
								<image src="https://z3.ax1x.com/2021/04/19/cTgs1A.png" mode="" class="agreement-image">
								</image>
							</view>
							<view class="agreement-vice-titll">
								<view class="agreement-titll">《账户管理协议》</view>
								<image src="https://z3.ax1x.com/2021/04/19/cTgs1A.png" mode="" class="agreement-image">
								</image>
							</view>
							<view class="agreement-vice-titll">
								<view class="agreement-titll">《民生银行跨行通协议》</view>
								<image src="https://z3.ax1x.com/2021/04/19/cTgs1A.png" mode="" class="agreement-image">
								</image>
							</view>
							<view class="agreement-vice-titll">
								<view class="agreement-titll">《个人税收声明》</view>
								<image src="https://z3.ax1x.com/2021/04/19/cTgs1A.png" mode="" class="agreement-image">
								</image>
							</view>
							<view class="agreement-vice-titll">
								<view class="agreement-titll">《账户即时通协议》</view>
								<image src="https://z3.ax1x.com/2021/04/19/cTgs1A.png" mode="" class="agreement-image">
								</image>
							</view>

						</view>
					</view>
					<view class="swiper-item2 problem-active" v-if="informationActive=='常见问题'" @click="tabchange">

						<view class="problem">
							<text class="problem-questions">{{detailData.problemList[0].problem}}</text>
						</view>
						<view class="problem-tips">
							<text class="problem-text">{{detailData.problemList[0].answer}}</text>
						</view>
						<view class="problem">
							<text class="problem-questions">{{detailData.problemList[1].problem}}</text>
						</view>
						<view class="problem-tips">
							<text class="problem-text">{{detailData.problemList[1].answer}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('regular');
	const {
		mapState:mapState2
	} = createNamespacedHelpers('UserInfor');
	export default {
		data() {
			return {
				information: [{
						_id: 1,
						name: "交易规则"
					},
					{
						_id: 2,
						name: "信息披露"
					},
					{
						_id: 3,
						name: "常见问题"
					}
				],
				start: 0,
				informationActive: "交易规则",
				invoiceShow: false,
				information: [{
						_id: 1,
						name: "交易规则"
					},
					{
						_id: 2,
						name: "信息披露"
					},
					{
						_id: 3,
						name: "常见问题"
					}
				],
				informationActive: "交易规则",
				sellTimeName: '',
				sumCount: '',
				active: false,
				number: ''

			}
		},
		computed: {
			...mapState(["detailData"]),
			...mapState2(["userData"]),
			computNum() {
				return (this.number * this.detailData.yieldRates * 0.01 * 28).toFixed(2)
			}
		},
		methods: {
			...mapActions(["getDetailData"]),
			onLoad: function(option) {
				if (option.sellTimeName == 'null') {
					this.active = true
				} else {
					this.active = false
				}
				this.getDetailData({
					"fid": option.id,
					"status": 1,
				});
				this.sellTimeName = option.sellTimeName;
				this.sumCount = option.sumCount;
			},
			viewTabBtn(index, val) {
				this.start = index
				this.informationActive = val
			},
			tabchange(e) {
				this.start = e.target.current
				this.invoiceDis = true
			},
			calculator() {
				this.invoiceShow = true
			},
			calculatorNo() {
				this.invoiceShow = false
			},
			switchData(val) {
				this.informationActive = val
			},
			//跳转购买
			tobuy(id,productName,payType,minMoney) {
				let token = this.userData.token
				if (token) {

					uni.navigateTo({
						url: `/pages/buynow/buynow?buyMin=${minMoney}&chanping=${payType}`
					});
					
					const buyDetail = {
						'fid': this.detailData.fid,
						'productName': this.detailData.productName,
						'productType': this.detailData.payType
					};
					uni.setStorageSync('details',buyDetail)
				} else {

					uni.showToast({
						title: "您还未登录，请登录哦~",
						duration: 1000,
						icon: "none"
					});
					const setTimeOutId = setTimeout(function() {
						uni.navigateTo({
							url: "/pages/login/login",
						});
					}, 1200);
				}

			}
		}
	}
</script>

<style>
	.boxs {
		position: relative;
	}

	.header {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		text-align: center;
		line-height: 88rpx;

	}

	.header-left {
		margin-left: 24rpx;
		width: 48rpx;
		height: 48rpx;
		margin-top: 8rpx;
	}

	.header-left image {
		width: 14rpx;
		height: 26rpx;

	}

	.header-center {
		width: 244rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 88rpx;
		color: #333333;
		opacity: 1;
		margin-left: 202rpx;
	}


	.gold-background {
		width: 100%;
		/* border: 1px solid red; */
		background: url('https://z3.ax1x.com/2021/04/19/cobq9P.png') no-repeat;
		background-size: 100% 430rpx;
		position: relative;
	}

	.gold-paice {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		text-align: center;
		font-size: 60rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
		padding-top: 20rpx;
		margin-bottom: 8rpx;
	}

	.gold-newest {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto 8rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}

	.gold-Decline {
		width: 100%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-evenly;
	}

	.gold-item {
		width: 260rpx;
		height: 140rpx;
		/* border: 1px solid red; */
		line-height: 60rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.item-text {
		font-size: 40rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item-texttwo {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}

	/* 投资周期 */
	.touzi {
		width: 702rpx;
		height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12rpx;
		margin: 25rpx 25rpx;
		padding-top: 10rpx;
	}

	.touzi-dian {
		width: 660rpx;
		height: 40rpx;
		margin: 20rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.dian-xian {
		width: 52rpx;
		height: 0rpx;
		border: 1rpx solid #000000;
		opacity: 0.05;
	}

	.dian-yuan {
		width: 16rpx;
		height: 16rpx;
		background: #3476F1;
		border-radius: 50%;
		opacity: 1;
	}

	.dian-yuan2 {
		width: 16rpx;
		height: 16rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 50%;
		opacity: 1;
	}

	.dian-cx {
		width: 158rpx;
		height: 0rpx;
		border: 1rpx solid #000000;
		opacity: 0.05;
	}

	.touzi-cent {
		width: 660rpx;
		height: 100rpx;
		margin: 20rpx 20rpx;
	}

	.cent-box {
		width: 660rpx;
		height: 40rpx;
		display: flex;
		text-align: center;
		line-height: 100rpx;
	}

	.box-top {
		width: 130rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		opacity: 1;
	}

	.box-top2 {
		width: 130rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		opacity: 1;
		margin-left: 40rpx;
	}

	.box-top3 {
		width: 130rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		opacity: 1;
		margin-left: 58rpx;
	}

	.box-top4 {
		width: 130rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		opacity: 1;
		margin-left: 60rpx;
	}

	.box-bow {
		width: 120rpx;
		height: 30rpx;
		font-size: 24rpx;
		font-family: Lato;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
	}

	.box-bow2 {
		width: 120rpx;
		height: 30rpx;
		font-size: 24rpx;
		font-family: Lato;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
		margin-left: 50rpx;
	}

	.box-bow3 {
		width: 120rpx;
		height: 30rpx;
		font-size: 24rpx;
		font-family: Lato;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
		margin-left: 60rpx;
	}

	.box-bow4 {
		width: 140rpx;
		height: 30rpx;
		font-size: 24rpx;
		font-family: Lato;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
		margin-left: 50rpx;
	}

	.xuxian {
		width: 644rpx;
		height: 0rpx;
		border: 1rpx solid #000000;
		opacity: 0.03;
		margin-top: 20rpx;
	}

	.cent-floor {
		width: 640rpx;
		height: 160rpx;
		margin: 20rpx 20rpx;
		display: flex;
	}

	.floor-zuo {
		font-size: 24rpx;
		color: #999999;
		width: 320rpx;
	}

	.floor-you {
		font-size: 24rpx;
		color: #333333;
		margin-left: 30rpx;
		line-height: 38rpx;
	}

	.navs {
		background-color: #FFFFFF;
		height: 976rpx;
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	/* 安全保障 */
	.security-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
		clear: both;
	}

	.title-box {
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		opacity: 1;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}

	.title {
		margin-left: 10rpx;
		width: 128rpx;
		height: 44px;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 44px;
		color: #333333;
		opacity: 1;
	}

	.security-box {
		width: 700rpx;
		height: 380rpx;
		background: #FFFFFF;
		margin: 0rpx auto;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		/* border: 1px solid red; */
	}

	.security-every {
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		display: flex;
	}

	.every-item {
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-bottom: 10rpx;
	}

	.every-image {
		width: 94rpx;
		height: 94rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.every-text {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.security-describe {
		width: 640rpx;
		height: 172rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 26rpx auto 24rpx;
		padding-top: 22rpx;
	}

	.describe {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #999999;
	}

	/* 交易规则*/
	.information {
		width: 700rpx;
		height: 114rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
	}

	.information-item {
		width: 148rpx;
		height: 86rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-top: 28rpx;
	}

	.information-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.informationActive {
		width: 54rpx;
		height: 8rpx;
		background: #3476F1;
		border-radius: 6rpx;
		margin: 10rpx auto 0rpx;
	}

	.informationText {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476F1;
	}

	.swiper {
		height: 1560rpx;
	}

	.swiper-item1 {
		height: 1100rpx;
	}

	.swiper-item2 {
		height: 1400rpx;
	}

	.item-box {
		width: 700rpx;
		height: 600rpx;
		margin: 25rpx 25rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
	}

	.item-top {
		margin-left: 32rpx;
		margin-top: 10rpx;
		width: 640rpx;
		height: 80rpx;
		background-color: #FEFEFE;
		font-size: 28rpx;
		color: #333333;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.item-goumai {
		font-size: 24rpx;
		color: #999999;
	}

	.item-top text {
		font-size: 24rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.item-kfr {
		margin-left: 32rpx;
		margin-top: 50rpx;
		width: 700rpx;
		height: 220rpx;
		background-color: #FEFEFE;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		display: flex;

	}

	.kfr-left {
		font-size: 24rpx;
		color: #999999;
	}

	.kfr-right {
		width: 500rpx;
		font-size: 24rpx;
		color: #333333;
		margin-left: 54rpx;
	}

	.item-syfy {
		width: 700rpx;
		height: 340rpx;
		margin: 25rpx 25rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		padding-top: 24rpx;
	}

	.syfy-top {
		width: 630rpx;
		height: 70rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.syfy-cent {
		display: flex;
		width: 630rpx;
		height: 150rpx;
		margin-left: 32rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.cent-left {
		font-size: 24rpx;
		color: #999999;
	}

	.cent-right {
		width: 500rpx;
		font-size: 24rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.syfy-btw {
		display: flex;
		height: 60rpx;
		margin-left: 32rpx;
		margin-top: 30rpx;
	}

	.btw-zuo {
		font-size: 24rpx;
		color: #999999;
	}

	.btw-you {
		width: 500rpx;
		font-size: 24rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.buttow {
		width: 700rpx;
		height: 410rpx;
		margin: 25rpx 25rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		padding-top: 20rpx;
	}

	.but-leibao {

		margin-left: 30rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.container {
		margin-left: 30rpx;
		margin-top: 24rpx;
	}

	.d-table {
		width: 642rpx;
		height: 60rpx;
		border: 1rpx solid #f2f2f2;
		display: table;
		vertical-align: middle;
		text-align: center;
		table-layout: fixed;
		font-size: 24rpx;
		color: #999999;
		word-break: break-all;
		background-color: white;
		border-collapse: collapse;
	}

	.d-caption {
		display: table-caption;
		background-color: inherit;
	}

	.d-thead {
		display: table-header-group;
		font-weight: 600;
	}

	.d-tbody {
		display: table-row-group;
	}

	.d-tfoot {
		display: table-footer-group;
	}

	.d-tr {
		display: table-row;
		width: 100%;
	}

	.d-td,
	.d-th {
		display: table-cell;
		vertical-align: middle;
		height: 50rpx;
		font-size: 28rpx;
	}

	.td-box {
		display: flex;
		justify-content: center;
	}

	.d-td image {
		margin-right: 20rpx;
		margin-top: 6rpx;
	}

	.border-top {
		border-top: 1rpx solid #f2f2f2 !important;
	}

	.border-left {
		border-left: 1rpx solid #f2f2f2 !important;
	}

	.border-bottom {
		border-bottom: 1rpx solid #f2f2f2 !important;
	}

	.border-right {
		border-right: 1rpx solid #f2f2f2 !important;
	}

	.border {
		border: 1rpx solid #f2f2f2;
	}

	.floot {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.floot-left {
		width: 110rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #FFFFFF;
	}

	.floot-right {
		width: 640rpx;
		height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #3476F1;
	}

	.floot-right1 {
		width: 640rpx;
		height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 计算器模态框 */
	.maskName {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100vh;
		background: rgb(0 0 0 / 50%);
		overflow: hidden;
	}

	.newFormName {
		background: #f3f3f3;
		padding: 10px;
		position: fixed;
		z-index: 9999;
		top: 0;
		margin: 40rpx;
		width: 85%;
		border-radius: 10rpx;
	}

	.newForm {
		background-color: #f3f3f3;
		position: fixed;
		z-index: 999;
		top: 0;
		margin: 40rpx;
		left: 0;
		width: 90%;
		border-radius: 10rpx;
		height: 32vh;
	}

	.nweflex {
		padding: 5rpx 10rpx;
		background: #007AFF;
		color: #FFFFFF;
		width: 30%;
		text-align: center;
		position: fixed;
		right: 0;
		top: 0;
	}

	/* .mask {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		height: calc(100vh - 44px);
		background: rgb(0 0 0 / 50%);
		overflow: hidden;
	} */

	.cents {
		width: 620rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		line-height: 100rpx;
		margin-left: 50rpx;
	}

	.cent1 {
		font-size: 28rpx;
		color: #333333;
		margin-left: 200rpx;
	}

	.cent2 {
		width: 60rpx;
		height: 60rpx;
		margin-left: 200rpx;
		margin-top: 20rpx;
	}

	.cent2 image {
		width: 50rpx;
		height: 50rpx;
	}

	.input-box {
		width: 600rpx;
		height: 120rpx;
		margin-left: 40rpx;
	}

	.input-box text {
		font-size: 28rpx;
		color: #999999;
	}

	.input-box .input {
		height: 64rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 14rpx;
		padding-left: 20rpx;
	}

	.input-box2 {
		width: 600rpx;
		height: 120rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
	}

	.input-box2 text {
		font-size: 28rpx;
		color: #999999;
	}

	.input-box2 .input2 {
		height: 64rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 14rpx;
		padding-left: 20rpx;
	}

	/* 基本信息 */
	.essential-information {
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}

	.essential-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		/* border: 1px solid red; */
		margin: 0rpx auto;
	}

	.titll-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 88rpx;
	}


	.essential-vice-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
	}

	.vice-titll {
		width: 150rpx;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}

	.vice-text {
		width: 100%;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
		word-wrap: break-word;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}

	.agreement {
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 40rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}

	.agreement-vice-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
		justify-content: space-between;
		line-height: 88rpx;
	}

	.agreement-titll {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		/* border: 1px solid red; */
	}

	.agreement-image {
		width: 15rpx;
		height: 25rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
	}

	/* 常见问题 */
	.problem-active {
		padding: 30rpx;
		/* border: 1px solid red; */
		width: 670rpx;
	}

	.problem {
		text-align: right;
		margin: 20rpx;
	}

	.problem-questions {
		width: auto;
		height: 88rpx;
		display: inline-block;
		background-color: #3476F1;
		padding: 0rpx 15rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 24rpx;
	}

	.problem-tips {
		width: 622rpx;
		height: auto;
		border: 1rpx solid #F1F1F1;
		padding: 15rpx;
		border-radius: 24rpx;
		color: #727272;
		font-size: 24rpx;
	}
</style>
